<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">留言本</h1>
    </header>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   <style type="text/css">
   	.mui-bar-nav{
   		background-color: white;
   	}
	#liuyan1{
		position: absolute;
		right: 1vw;
		color: #C8C8C8;
	}
	.mui-table-view{
		margin-left: 10px;
		margin-right: 10px;
	}
	.zhuyeul li{
		height: 100px;
	}
	.time{
		position: relative;
		left: 195px;
		bottom: 40px;
	}
	.zhuye-btn{
		position: relative;left: 205px;
		bottom: 35px;
	}
	.mui-ellipsis{
		width: 200px;
	}
	.mui-input-group{
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	#wode{
		margin-top: 10px;
	}
   </style>
</head>
<body>
	<div class="mui-content" id="zhuye">
		
				<div class="mui-control-content mui-active" id="home">
					<!--公告-->
					<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<h3>最新公告:</h3>
							<p style="color: #333; text-indent: 2em;">内容内容内容内容内容内容内容内容内容内容内容内容。</p>
							<p style="position: relative; left: 285px;">时间</p>
						</div>
					</div>
					</div>
				<ul class="mui-table-view zhuyeul">
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="images/biaoqing.jpg">
				            <div class="mui-media-body">
				                用户1
				                <p class="mui-ellipsis">留言本怎么做?</p>
				                <p class="time">2018-8-28 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15:00</p>
				                <button type="button" class="mui-btn zhuye-btn" id="huifu">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="images/user-photo.png">
				            <div class="mui-media-body">
				                用户2
				                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
				                <p class="time">2018-8-28 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                用户3
				                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				                <p class="time">2018-8-28 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15:00</p>
				                <button type="button" class="mui-btn zhuye-btn">回复</button>
				            </div>
				        </a>
				    </li>
				</ul>
				</div>
	
		
		<div class="mui-control-content" id="liuyan">
				<header class="mui-bar mui-bar-nav">
				   
				    <button type="button" class="mui-btn mui-btn-outlined" id="liuyan1">发布</button>
				    <h1 class="mui-title">发布留言</h1>
				</header>
				<form action="" class="mui-input-group">
					<div class="mui-input-row">
						<input type="text" class="mui-input-clear" placeholder="请输入标题" />
					</div>
					<textarea name="" rows="3" cols="20" placeholder="请输入内容"></textarea>
				
				</form>
		</div>
		
		
		<div class="mui-control-content" id="xiaoxi">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media">
			       
			            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
			            <div class="mui-media-body">
			                用户3
			                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
			                <p style="color: #000000;">我:留言本怎么做</p>
			            </div>
			            <button type="button" class="mui-btn">回复</button>  
			    </li>
			    <li class="mui-table-view-cell mui-media">
			       
			            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
			            <div class="mui-media-body">
			                用户4
			                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
			                <p style="color: #000000;">我:留言本怎么做</p>
			            </div>
			        	<button type="button" class="mui-btn">回复</button>
			    </li>
			</ul>
		</div>
		
		
		<div class="mui-control-content" id="wode">
			<div class="mui-content">
			    <ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media">
			        
			            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
			            <div class="mui-media-body">
			                管理员1
			                <p class="mui-ellipsis">简介</p>
			                
			            </div>
			            <button type="button" class="mui-btn" id="gerenxinxi">编辑<span class="mui-icon mui-icon-compose"></span></button>
			    </li>
			    
			</ul>
			<ul class="mui-table-view">
			        <li class="mui-table-view-cell">
			            <a class="mui-navigate-right" id="yonghuguanli">
			                用户管理
			            </a>
			        </li>
			        <li class="mui-table-view-cell">
			            <a class="mui-navigate-right" id="liuyanguanli">
			                 留言管理
			            </a>
			        </li>
			        <li class="mui-table-view-cell">
			            <a class="mui-navigate-right" id="gonggaoguanli">
			                 公告管理
			            </a>
			        </li>
			        <li class="mui-table-view-cell">
			            <a class="mui-navigate-right" id="adminguanli">
			                 管理员管理
			            </a>
			        </li>
			        <li class="mui-table-view-cell">
			            <a class="mui-navigate-right" id="xitongguanli">
			                 系统管理
			            </a>
			        </li>
			      
			    </ul>
			</div>
		</div>
	</div>
</body>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">主页</span>
    </a>
    <a class="mui-tab-item" href="#liuyan">
        <span class="mui-icon mui-icon-chatbubble"></span>
        <span class="mui-tab-label">留言</span>
    </a>
    <a class="mui-tab-item" href="#xiaoxi">
        <span class="mui-icon mui-icon-chat"></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item" href="#wode">
        <span class="mui-icon mui-icon-person"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<script type="text/javascript">
	document.getElementById('huifu').addEventListener('tap', function() {
  //打开关于页面
  		mui.openWindow({
   			url: 'liuyanxiangqing.html', 
    		id:'liuyanxiangqing.html'
  				});
	});
	document.getElementById('liuyan1').addEventListener('tap', function() {
  //打开关于页面
  		mui.openWindow({
   			url: 'index(login).html', 
    		id:'index(login).html'
  				});
	});
	document.getElementById('gerenxinxi').addEventListener('tap', function() {
  //打开关于页面
  		mui.openWindow({
   			url: 'admingerenxinxi.html', 
    		id:'admingerenxinxi.html'
  				});
	});
	document.getElementById('xitongguanli').addEventListener('tap', function() {
  //打开关于页面
  		mui.openWindow({
   			url: 'system.html', 
    		id:'system.html'
  				});
	});
	document.getElementById('adminguanli').addEventListener('tap', function() {
  //打开关于页面
  		mui.openWindow({
   			url: 'adminguanli.html', 
    		id:'adminguanli.html'
  				});
	});
	document.getElementById('gonggaoguanli').addEventListener('tap', function() {
  //打开关于页面
  		mui.openWindow({
   			url: 'gonggaoguanli.html', 
    		id:'gonggaoguanli.html'
  				});
	});
	document.getElementById('liuyanguanli').addEventListener('tap', function() {
  //打开关于页面
  		mui.openWindow({
   			url: 'yonghuliuyan.html', 
    		id:'yonghuliuyan.html'
  				});
	});
</script>
</html>